<template>
  <div>
    <el-upload
      ref="upload"
      drag
      action
      :auto-upload="false"
      multiple
      :on-change="uploadFile"
    >
<!--      <el-image style="width: 80px !important;height: 100% !important"  fit="scaleDown"-->
<!--                :src="scope.row.imgpath" :preview-src-list="[scope.row.imgpath]"/>-->

      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <el-progress
      style="margin: 20px 0"
      :text-inside="true"
      :stroke-width="26"
      :percentage="progress"
    ></el-progress>

    <div style="display:inline-block">
      <upload text="店内照片" style="display: inline-block"
              :content="JSON.stringify(uploadData.pic)" :fileListValue="info.authImg3" v-model="info.authImg3"
      />
    </div>
  </div>
</template>
<script>
  import upload from '@/components/Upload/uploadImg'

  export default {
    components: {
      upload,
    },
    data() {
      return {
        info:{
          authImg3:''
        },
        uploadData: {

          pic: {
            tag: 'corpicon',
            type: 100,
            name: '商户icon',
            path: 'corp/files/'
          },
          file: {
            tag: 'corpfile',
            type: 100,
            name: '商户文件',
            path: 'corp/files/'
          }
        },
        progress: 0,
        uploadId: "",
        file_name: "",

      }
    },
    methods: {
      async uploadFile(files) {
        let that = this;
        let file = files.raw;
        let OSS = require("ali-oss");
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        //let res = await GetSts();//向后端发请求获取信息
        let client = new OSS({
          region: 'oss-cn-zhangjiakou',
          // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
          accessKeyId: 'LTAI5t5hdHLzd4eqpznaJLVm',
          accessKeySecret: 'FX96r0Ctry0dFuLWWq5mDPIYtraG5G',
          domain:"https://files.gamepro.vip",
          // secure:true,
          bucket:"btgame001"
        });
        const options = {
          // 获取分片上传进度、断点和返回值。
          progress: (p, cpt) => {
            that.uploadId = cpt.uploadId;//取消时需要的参数
            that.progress = Number((p * 100).toFixed(0));//进度条
          },
          // 设置并发上传的分片数量。
          parallel: 100,
          // 设置分片大小。默认值为1 MB，最小值为100 KB。
          partSize: 100 * 1024,
          // headers,
          // 自定义元数据，通过HeadObject接口可以获取Object的元数据。
          meta: {year: 2020, people: "test"},
          // callback: {
          //   // 设置回调请求的服务器地址，且要求必须为公网地址。
          //   url: res.data.body.callback.url,
          //   // 设置发起回调时请求body的值。
          //   body: res.data.body.callback.body,
          //   // 设置发起回调请求的Content-Type。
          //   contentType: res.data.body.callback.contentType,
          // },
        };

        //开始分片上传。
        async function multipartUpload() {
          try {
            //object-name可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
            let result = await client.multipartUpload(
              "upload/"+file.name,
              file,
              {
                ...options,
              }
            );
            console.log(result);
            // let head = await client.head(file.name);
            // console.log(head);
          } catch (e) {
            // 捕获超时异常。
            console.log(e);
          }
        }
        multipartUpload(); //调用函数
      }
    }
  }
</script>
